<script setup>
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { ControlButton, Controls } from '@vue-flow/controls'
import RectNode from './components/RectNode.vue'
import DeaultNode from './components/DefaultNode.vue'
import InputNode from './components/InputNode.vue'
import Operation from './components/Operation.vue'
import Icon from './Icon.vue'
import useDeviceFlowStore from './pinia.ts'
import NoDataContent from '@/commn/NoDataContent/index.vue'

const {
  onPaneReady,
  onNodeDragStart,
  onNodeDragStop,
  onNodeDrag,
  setViewport,
  setState,
  toObject,
  fitView,
  getNodes
} = useVueFlow({ multiSelectionActive: false })

// 自动缩放并聚焦到特定节点
// fitView({ nodes: [node.id], padding: 0.5 }) // padding为边距比例:ml-citation{ref="1,8" data="citationList"}
// 将指定节点居中（需计算节点位置）
// setCenter(node.position.x, node.position.y, { duration: 500 }) // 可选动画效果:ml-citation{ref="6,8" data="citationList"}//
const ControlsEef = ref()
const flowInstance = ref()
// our dark mode toggle flag
const dark = ref(false)
const flowKey = 'vue-flow--save-restore'
const flowStore = useDeviceFlowStore()
const isEdit = computed(() => flowStore.isEdit)
onPaneReady(() => {
  setTimeout(() => {
    fitView({
      padding: 0.2, // 控制边距比例，防止缩得太小
      duration: 500, // 动画时间
      maxZoom: 1.5,
      minZoom: 0.8
    })
  }, 50)
})

// 拖拽事件 需要修改 x,y 位置信息
onNodeDragStart((res) => {
  const { nodes } = res
  // if (nodes.length === 2) {
  //   console.log('onNodeDragStart', nodes)
  //   nodes[0].draggable = false
  //   event.preventDefault() // 阻止默认拖动行为
  //   event.stopPropagation()
  // } else {
  //   nodes[0].draggable = true
  // }
})
onNodeDrag((res) => {
  const { nodes, event } = res
  // if (nodes.length === 2) {
  //   console.log('onNodeDrag', nodes)
  //   nodes[0].draggable = false
  //   event.preventDefault() // 阻止默认拖动行为
  //   event.stopPropagation()
  // } else {
  //   nodes[0].draggable = true
  // }
})
onNodeDragStop((res) => {})
/**
 * 重置视窗大小
 */
function resetTransform() {
  fitView({
    padding: 0.2, // 控制边距比例，防止缩得太小
    nodes: [], // 不指定具体节点则自动计算全部节点
    duration: 500, // 动画时间
    maxZoom: 1.5,
    minZoom: 0.8
  })
}
const clickhander = (value) => {
  console.log('value', value)
}

// 删除节点
const deleteNode = (res) => {
  const { nodes: newNode } = toObject() // 获取当前最新nodes 列表
  const current = newNode.filter((node) => node.id !== res.id)
  setState({ nodes: current })
}

onMounted(() => {
  // onRestore()
  flowStore.initStore()
  nextTick(() => {})
})
</script>

<template>
  <VueFlow
    v-if="flowStore.nodes.length"
    :nodes="flowStore.nodes"
    :class="{ dark }"
    class="basic-flow"
    :nodes-draggable="isEdit"
    @on-node-click="clickhander"
    :min-zoom="0.1"
    :max-zoom="2"
  >
    <Operation />
    <Controls ref="ControlsEef" :showInteractive="false" :showFitView="false" position="top-left">
      <ControlButton @click="resetTransform">
        <Icon name="flow-init" />
      </ControlButton>
    </Controls>
    <template #node-resizable="resizableNodeProps">
      <RectNode :node="resizableNodeProps" :deleteNode="deleteNode" />
    </template>
    <template #node-defaultshow="defaultNodeProps">
      <DeaultNode :node="defaultNodeProps" :dark="dark" />
    </template>
    <template #node-inputnode="defaultNodeProps">
      <InputNode :deleteNode="deleteNode" :node="defaultNodeProps" />
    </template>
  </VueFlow>
  <NoDataContent v-else />
</template>
<style scoped lang="scss">
/* Use a purple theme for our custom node */
.vue-flow__node-custom {
  background: purple;
  color: white;
  border: 1px solid purple;
  border-radius: 4px;
  box-shadow: 0 0 0 1px purple;
  padding: 8px;
}

.vue-flow__minimap {
  transform: scale(75%);
  transform-origin: bottom right;
}

.basic-flow {
  background: #f7faff;
  color: #fffffb;
}

.basic-flow.dark .vue-flow__node {
  background: #4a5568;
  color: #fffffb;
}

.basic-flow.dark .vue-flow__node.selected {
  background: #333;
  box-shadow: 0 0 0 2px #2563eb;
}

.basic-flow .vue-flow__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.basic-flow.dark .vue-flow__controls {
  border: 1px solid #fffffb;
}

.basic-flow .vue-flow__controls .vue-flow__controls-button {
  border: none;
  border-right: 1px solid #eee;
}

.basic-flow .vue-flow__controls .vue-flow__controls-button svg {
  height: 100%;
  width: 100%;
}

.basic-flow.dark .vue-flow__controls .vue-flow__controls-button {
  background: #333;
  fill: #fffffb;
  border: none;
}

.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
  background: #4d4d4d;
}

::v-deep(.vue-flow__controls-button) {
  fill: #1d4f91;
}
</style>
